class List{
    constructor() {
        //获取元素
        this.container = document.querySelector('.w-5>ul')
        // this.span = document.querySelector('.all-right>span')
        this.init()
    }
    init() {
        this.request()
        //注意点：data数据是发送请求获取到的，在初始化的时候直接调用代码，异步代码是没有返回结果的所以是undefined
    }
    request() {
        pAjax({url: '/data/goods.json'})
        .then((res)=>{
            let data = JSON.parse(res)
            data = data.slice(200, 260)
            this.render(data)
        })
    }
    render(data) {
        data.forEach((item) => {
            //html/details.html?id=${item.goods_id}在查询字符串后面进行参数拼接，可以让网页跳转的时候把需要的参数携带到另一个网页
            this.container.innerHTML += `
                     <li>
                       <a href="http://127.0.0.1:2113/html/list.html?id=${item.goods_id}" style="text-decoration:none; color:black;">
                        <div class="pic">
                            <img src="${item.img_small_logo}">
                        </div>
                        <p class="title hide">${item.title}</p>
                        <p class="price">${item.price}</p>
                        </a>
                        <button data-id=${item.goods_id}>加入购物车</button>
                    </li>
                `
        })
    }
}
new List()

//分页功能
//发送请求获取数据
$.get('../data/goods.json')
.then(res=>{
    let data = res.slice(100, 160)
    render(data)
}, 'json')
//渲染页面
function render(data){
    data.forEach(item=>{
        $('ul')[8].innerHTML += `
            <li class="li-item">
                <a href="html/details.html?id=${item.goods_id}">
                    <div class="pic">
                        <img src="${item.img_small_logo}">
                            </div>
                <p class="title">${item.title}</p>
                <p class="price">${item.price}</p>
                </a>
                <button data-id="${item.goods_id}" id="b">加入购物车</button>
            </li>
        `
    })
    $(".w-5-ul").paging({
        PageNum: 10, //每页显示数目
        pageMax: true, //按钮长度是否显示
        pageMaxHideShow: false, //在最后一个的时候是否隐藏按钮长度
        pageDownUpHide: false, //到第一个或最后一个是否让上一页或下一页消失
        pageInput: true, //是否使用文本框输入跳转
        pagingBtnHide: false, //是否让按钮变为一个
        pagingBtnPaging: true,//按钮是否分页
        pagingDisplay: "flex"//显示的属性，弹性盒子还是块化
    })
}